<template>
    <div class="content">
        <div class="search">
            <el-input v-model="input" placeholder="请输入主体名称"></el-input>
            <el-button type="primary">搜索</el-button>
        </div>
        <div class="btns" v-if="false">
            <el-button-group>
                <el-button type="primary" size="small">新增</el-button>
                <el-button type="primary" size="small">修改</el-button>
            </el-button-group>
        </div>
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                v-if="false"
                width="55">
            </el-table-column>
            <el-table-column
                label="执法部门">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
                prop="laiyuan"
                label="主体名称 ">
            </el-table-column>
            <el-table-column
                prop="leibie"
                label="主体类别 "
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="zhuti"
                label="层级 "
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="leixing"
                label="所属领域 "
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="dangshiren"
                label="行政编制人数"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="lianxifangshi"
                label=" 设定依据"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="shifoulian"
                label=" 录入时间 "
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="zhuangtai"
                label=" 审核状态  "
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                v-if="false"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align: center; padding: 10px 0;">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="1000">
            </el-pagination>
        </div>

        <el-dialog title="分配人员" :visible.sync="dialogFormVisible" width="500px">
            <el-form :model="form">
                <el-select v-model="person" placeholder="请选择分配人员" style="width: 100%">
                    <el-option label="张三" value="shanghai"></el-option>
                    <el-option label="李四" value="beijing"></el-option>
                    <el-option label="王五" value="wangwu"></el-option>
                </el-select>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'zfztwh',
    data () {
        return {
            dialogFormVisible: false,
            person: '',
            tableData: [{
                id: '忻府区农业农村局',
                laiyuan: '忻府区农业农村局',
                leibie: '行政机关',
                zhuti: '县(市、区)级',
                leixing: '农业农村',
                dangshiren: '10',
                lianxifangshi: '忻办字【2019】32号',
                shifoulian: '2019/11/6  3:56:54 PM',
                zhuangtai: '已审核'
            }, {
                id: '忻府区应急管理局',
                laiyuan: '忻府区应急管理局',
                leibie: '行政机关',
                zhuti: '县(市、区)级',
                leixing: '安全',
                dangshiren: '6',
                lianxifangshi: '忻办字【2019】37号',
                shifoulian: '2019/11/6  3:54:58 PM',
                zhuangtai: '已审核'
            }, {
                id: '忻府区医疗保障局',
                laiyuan: '忻府区医疗保障局',
                leibie: '行政机关',
                zhuti: '县(市、区)级',
                leixing: '其他',
                dangshiren: '6',
                lianxifangshi: '忻办字【2019】41号',
                shifoulian: '2019/11/6  3:53:07 PM',
                zhuangtai: '已审核'
            }, {
                id: '忻府区市场监督管理局',
                laiyuan: '忻府区市场监督管理局',
                leibie: '行政机关',
                zhuti: '县(市、区)级',
                leixing: '其他',
                dangshiren: '34',
                lianxifangshi: '忻办字【2019】39号',
                shifoulian: '2019/11/6  3:51:17 PM',
                zhuangtai: '已审核'
            }, {
                id: '忻府区公安局交通警察大队',
                laiyuan: '忻府区公安局交通警察大队',
                leibie: '法律法规授权组织',
                zhuti: '县(市、区)级',
                leixing: '公安',
                dangshiren: '27',
                lianxifangshi: '',
                shifoulian: '2019/11/6  3:48:22 PM',
                zhuangtai: '已审核'
            }, {
                id: '忻府区公安局',
                laiyuan: '忻府区公安局',
                leibie: '行政机关',
                zhuti: '县(市、区)级',
                leixing: '公安',
                dangshiren: '187',
                lianxifangshi: '',
                shifoulian: '2019/11/6  3:42:16 PM',
                zhuangtai: '已审核'
            }, {
                id: '忻府区工业和信息化局',
                laiyuan: '忻府区工业和信息化局',
                leibie: '行政机关',
                zhuti: '县(市、区)级',
                leixing: '工业和信息化',
                dangshiren: '13',
                lianxifangshi: '忻办字【2019】22号',
                shifoulian: '2019/11/6  3:40:38 PM',
                zhuangtai: '已审核'
            }, {
                id: '忻府区民政局',
                laiyuan: '忻府区民政局',
                leibie: '行政机关',
                zhuti: '县(市、区)级',
                leixing: '民政',
                dangshiren: '6',
                lianxifangshi: '忻办字【2019】24号',
                shifoulian: '2019/11/6  3:38:04 PM',
                zhuangtai: '已审核'
            }, {
                id: '忻府区自然资源局',
                laiyuan: '忻府区自然资源局',
                leibie: '行政机关',
                zhuti: '县(市、区)级',
                leixing: '自然资源',
                dangshiren: '9',
                lianxifangshi: '忻办字【2019】28号 ',
                shifoulian: '2019/11/6  3:36:18 PM',
                zhuangtai: '已审核'
            }, {
                id: '忻府区水利局',
                laiyuan: '忻府区水利局',
                leibie: '行政机关',
                zhuti: '县(市、区)级',
                leixing: '水利',
                dangshiren: '7',
                lianxifangshi: '忻办字【2019】31号',
                shifoulian: '2019/11/6  10:45:46 AM',
                zhuangtai: '已审核'
            }],
            multipleSelection: [],
            options: [{
                value: '1',
                label: '简易案件'
            }, {
                value: '2',
                label: '一般案件'
            }, {
                value: '3',
                label: '重大案件'
            }, {
                value: '4',
                label: '刑事案件'
            }],
            value: '',
            formLabelWidth: '120px'
        }
    },
    methods: {
        openFP: function () {
            this.dialogFormVisible = true
        },
        add: function () {
            this.$router.push('/auditAdd')
        },
        edit: function () {
            this.add()
        }
    }
}
</script>

<style lang="less" scoped>
.content {
    margin: 15px 15px 80px 15px; background: #FFFFFF; border-radius: 5px; box-shadow: 0 10px 20px rgba(0,0,0,0.06); padding: 20px 30px;
}
.search {
    display: flex; justify-content: flex-start;
    .el-input {
        width: auto; margin-right: 20px;
    }
    .el-select {
        margin-right: 20px;
    }
}
.btns {
    margin: 15px 0;
}
</style>
